<template>
  <div class="box-shadow">
    <el-tabs v-model="configType">
      <!-- <el-tab-pane :label="$t('Web语音告警播报')" name="0">
        <div class="tip">提示：双击播报次数，可激活修改。</div>
        <el-table ref="tableRef" :data="tableData" tooltip-effect="dark">
          <el-table-column
            prop="alarmType"
            align="center"
            :label="$t('告警类型')"
          ></el-table-column>
          <el-table-column
            align="center"
            :label="$t('是否开启Web语音告警播报')"
          >
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.key">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('播报次数')">
            <template slot-scope="scope">
              <el-select v-model="scope.row.number">
                <el-option v-for="(item, index) in number" :key="index">
                  {{ item }}次
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            align="center"
            :label="$t('默认播报内容')"
          ></el-table-column>
          <el-table-column align="center" :label="$t('播报次数（建议）')">
            <template slot-scope="scope">
              {{ scope.row.frequency }}次
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane> -->
      <el-tab-pane :label="$t('本体语音告警播报')" name="1">
        <div class="tip">
          提示：双击播报次数，可激活修改，若需自定义播报内容，可前往【告警规则】页配置。
        </div>
        <el-table ref="tableRef" :data="noumenonData" tooltip-effect="dark">
          <el-table-column
            prop="alarmType"
            align="center"
            :label="$t('告警类型')"
          >
            <template slot-scope="scope">{{
              scope.row.alarmType | getAlarmType(that)
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('是否开启本体语音告警播报')"
          >
            <template slot-scope="scope">
              <el-radio-group
                :disabled="scope.row.alarmType == 3"
                v-model="scope.row.isEnable"
                @change="changeNotice('isEnable', $event, scope.row)"
              >
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('播报次数')">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.rate"
                @change="changeNotice('rate', $event, scope.row)"
              >
                <el-option
                  v-for="item in rateData"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            align="center"
            :label="$t('默认播报内容')"
          ></el-table-column>
          <el-table-column align="center" :label="$t('播报次数（建议）')">
            <template slot-scope="scope">
              {{ scope.row.rateAdvise }}次
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- <el-tab-pane :label="$t('告警通知')" name="2"> -->
      <!-- <div class="box-shadow"> -->
      <!-- 搜索 -->
      <!-- <div class="search-area">
            <div class="form">
              <el-form
                :model="listQuery"
                ref="listQuery"
                size="small"
                :inline="true"
                label-width="115px"
              >
                <el-form-item :label="$t('姓名') + ':'" prop="name">
                  <el-input
                    v-model="listQuery.name"
                    :placeholder="$t('请输入')"
                    clearable
                    size="medium"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item :label="$t('手机号') + ':'" prop="telphone">
                  <el-input
                    v-model="listQuery.telphone"
                    :placeholder="$t('请输入')"
                    clearable
                    size="medium"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item :label="$t('邮箱') + ':'" prop="email">
                  <el-input
                    v-model="listQuery.email"
                    :placeholder="$t('请输入')"
                    clearable
                    size="medium"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item :label="$t('短信发送') + ':'" prop="message">
                  <el-radio-group v-model="listQuery.infosend">
                    <el-radio label="1">发送</el-radio>
                    <el-radio label="0">不发送</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('邮件发送') + ':'" prop="mailsend">
                  <el-radio-group v-model="listQuery.mailsend">
                    <el-radio label="1">发送</el-radio>
                    <el-radio label="0">不发送</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div class="search-area-btn btns">
              <div
                @click="serachBtn"
                class="serch-btn cursor-pointer"
                v-hasPermi="['task:template:search']"
              >
                {{ $t("查询") }}
              </div>
              <div
                @click="resetFormBtn()"
                class="reset-btn cursor-pointer"
                v-hasPermi="['task:template:reset']"
              >
                {{ $t("重置") }}
              </div>
            </div>
          </div> -->
      <!-- 表格 -->
      <!-- <div class="table">
            <div class="self">
              <div class="search-area-btn btns">
                <div
                  @click="addAlarm"
                  class="serch-btn cursor-pointer table-top"
                  v-hasPermi="['task:template:add']"
                >
                  {{ $t("新增") }}
                </div>
                <div
                  @click="handleDelete('more', '')"
                  class="btn-red cursor-pointer table-top"
                  v-hasPermi="['task:template:batchremove']"
                >
                  {{ $t("批量删除") }}
                </div>
              </div>
              <el-table
                ref="tableRef"
                :data="noticeTable"
                tooltip-effect="dark"
                style="width: 100%; margin-top: 16px"
                @selection-change="selectionChange"
              >
              </el-table>
            </div>
          </div> -->
      <!-- </div> -->
      <!-- <div class="pagenation">
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            @pagination="getList"
          >
          </pagination>
        </div>
      </el-tab-pane> -->
    </el-tabs>
    <!-- <el-drawer
      :title="title"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose"
      size="35%"
    ></el-drawer> -->
  </div>
</template>
<script>
import { API_getNoticeList, API_noticeEdit } from "@/api/task/config";
export default {
  components: {},
  data() {
    return {
      that: this,
      title: "",
      drawerVisible: false,
      configType: "1",
      number: [1, 2, 3],
      rateData: [
        {
          value: 1,
          label: "1次",
        },
        {
          value: 2,
          label: "2次",
        },
        {
          value: 3,
          label: "3次",
        },
      ],
      tableData: [
        //Web语音告警
        {
          alarmType: "巡检对象告警",
          key: 1,
          number: 1,
          content: "告警内容",
          frequency: 1,
        },
        {
          alarmType: "碰撞告警",
          key: 0,
          number: 2,
          content: "告警内容",
          frequency: 2,
        },
      ],
      noumenonData: [],
      listQuery: {
        name: "",
        telphone: "",
        infosend: "",
        mailsend: "",
        pageNum: 1,
        pageSize: 10,
      },
      noticeTable: [],
      total: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleClose() {},
    changeNotice(type, e, item) {
      let params = {
        id: item.id,
      };
      if (type === "isEnable") {
        params.isEnable = item.isEnable;
      } else {
        params.rate = item.rate;
      }
      API_noticeEdit(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(this.$t("修改成功！"));
        }
      });
    },
    getList() {
      let params = {
        playerType: "1",
      };
      API_getNoticeList(params).then((res) => {
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            this.noumenonData = res.data;
          }
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetFormBtn() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**搜索 */
    serachBtn() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    /** table多选 */
    selectionChange(selection) {},
    /**新增模板 */
    addAlarm() {},
    /** 批量删除按钮操作 */
    handleDelete(row) {
      // const resourceIds = row.resourceId || this.ids;
      // this.$modal
      //   .confirm(
      //     this.$t("是否确认删除资源库编号为") +
      //       resourceIds +
      //       this.$t("的数据项")
      //   )
      //   .then(function () {
      //     return API_resourceDel(resourceIds);
      //   })
      //   .then(() => {
      //     this.getTableList();
      //     this.$modal.msgSuccess(this.$t("删除成功"));
      //   })
      //   .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.tip {
  height: 40px;
  line-height: 40px;
  margin: 0 24px;
  background-color: "pink";
  color: #fff;
  font-size: 14px;
}
.table {
  width: 100%;
  height: 738px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 24px;
  box-sizing: border-box;
  .btns {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    div:nth-child(2) {
      margin: 0 16px;
    }
  }
  .table-btns {
    display: flex;
    div {
      display: flex;
      width: 46px;
      height: 28px;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    div:nth-child(2) {
      margin: 0 10px;
    }
  }
}
</style>
